<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>IP封禁日志</title>
		<link href="../component/pear/css/pear.css" rel="stylesheet">
	</head>
	<body class="pear-container">
		<div class="layui-row">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">IP封禁日志</div>
					<div class="layui-card-body">
						<div class="layui-row">
							<div class="layui-col-md12">
								<table id="id-table-logs" lay-filter="filter-table-logs"></table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script type="text/html" id="user_toolbar">
			<form class="layui-form layui-row layui-col-space8">
				<div class="layui-col-md2">
					<input type="text" name="ip" value="" placeholder="封禁IP" class="layui-input" lay-affix="clear" />
				</div>
				<div class="layui-col-md3">
					<select name="block_reason" id="block_reason">
						<option value="">封禁原因-全部</option>
					</select>
				</div>
				<div class="pear-btn-container layui-col-md2">
					<button class="pear-btn pear-btn-primary pear-btn-md" lay-submit lay-filter="filter-table-search">查询</button>
					<button type="reset" class="pear-btn  pear-btn-md">重置</button>
				</div>
			</form>
		</script>
		<script type="text/html" id="table_bar">
			<span lay-event="unblock" style="cursor: pointer;">解封</span>
		</script>

		<script src="../component/layui/layui.js"></script>
		<script src="../component/pear/pear.js"></script>
		<script src="../js/action.js"></script>
		<script src="../js/attackType.js"></script>
		<script>
			layui.use(['form','table','util','jquery','popup','tag'], function() {
				var table = layui.table;
				var form = layui.form;
				var util = layui.util;
				var popup = layui.popup;
				var element = layui.element
				var $ = layui.$;

				table.render({
					elem: '#id-table-logs',
					url: '/ipblocking/list',
					cols: [[ //标题栏
						{field: 'ip', title: 'IP', templet: function(d) {
							if (d.ip_country_cn == 'CN') {
								if (d.ip_province_cn == d.ip_city_cn) {
									return '<div>' + d.ip + '(' + d.ip_country_cn + '-' + d.ip_city_cn + ')' + '</div>';
								} else {
									return '<div>' + d.ip + '(' + d.ip_province_cn + '-' + d.ip_city_cn + ')' + '</div>';
								}
							} else {
								return '<div>' + d.ip + '(' + d.ip_country_cn + ')' + '</div>';
							}
						}},
						{field: 'block_reason', title: '封禁原因'},
						{field: 'action', title: '处置动作', templet: function(d) {
							return '<div>' + getActionText(d.action) + '</div>';
						}},
						{field: 'start_time', title: '封禁开始时间'},
						{field: 'block_duration', title: '封禁时长', templet: function(d) {
							if (d.block_duration == 0) {
								return '<div>永久</div>';
							} else {
								return '<div>' + d.block_duration + ' 秒</div>';
							}
						}},
						{field: 'end_time', title: '封禁结束时间'},
						{field: 'unblock_time', title: '状态', templet: function(d) {
							if (d.unblock_time != null) {
								return '<div>已解封</div>';
							} else if (d.end_time != null && new Date() > new Date(d.end_time)) {
								return '<div>已结束</div>';
							} else {
								return '<div>封禁中</div>';
							}
						}},
						{fixed: 'right', title:'操作', width: 60, minWidth: 60, toolbar: '#table_bar'}
					]],
					toolbar: '#user_toolbar',
					page: true, // 是否显示分页
					limits: [10, 15, 20, 25, 30, 50, 100],
					limit: 10, // 每页默认显示的数量
				});

				// 触发单元格工具事件
				table.on('tool(filter-table-logs)', function(obj) {
					var data = obj.data; // 获得当前行数据

					if(obj.event === 'unblock') {
						if (data.unblock_time != null || (data.end_time != null && new Date(data.end_time) < new Date())) {
							return;
						}

						layer.confirm('确定解除对该IP的封禁吗？', {
							icon: 3,
							title: '提示'
						}, 
						function(index) {
							$.post('/ipblocking/unblock',  {id: data.id}, function(res) {
								if (res && res.code == 200) {
									table.reloadData('id-table-logs');
									layer.close(index);
									return true;
								} else {
									popup.failure(res.msg);
									return false;
								}
							}, "json");
						});
					}
				});

				form.on('submit(filter-table-search)', function(data) {
					var field = data.field;
					// 执行搜索重载
					table.reloadData('id-table-logs', {
						page: {
							curr: 1
						},
						where: field
					});
					return false;
				});

				$(function(){
					initAttackTypeSelect('block_reason', function() {
						form.render($('#block_reason'));
					});
					// 阻止回车触发表单提交
					$(document).on('keydown', function (e) {
						if (e.keyCode === 13) {
							e.preventDefault();
							return false;
						}
					});
				});
			});
		</script>
	</body>
</html>
